<template>
	<div class="my_popup_picker">
		<van-popup v-model:show="showPicker" round position="bottom">
			<div class="title">{{ popupTitle }}</div>
			<slot />

			<div class="picker_btns">
				<van-button class="picker_btn picker_btn_wht" size="normal" @click="showPicker = false">取消</van-button>
				<van-button class="picker_btn" size="normal" @click="popupConfirm">确定</van-button>
			</div>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

defineProps<{
	popupTitle?: string;
}>();
const emit = defineEmits<{
	(event: 'popupConfirm'): void;
}>();

let showPicker = ref<boolean>(false);

const popupConfirm = () => {
	showPicker.value = false;
	emit('popupConfirm');
};

const show = () => {
	showPicker.value = true;
};

defineExpose({
	show
});
</script>

<style lang="scss" scoped>
.my_popup_picker {
	.title {
		@include flx-align-center;
		height: 50px;
		margin-left: 20px;
		color: #1a1a1a;
		font-size: 16px;
		font-weight: bold;
	}
	.picker_btns {
		@include flx-justify-between;
		height: 80px;
		padding: 0 20px;
		.picker_btn {
			width: 45%;
			height: 42px;
			border-radius: 20px;
			color: white;
			font-size: 15px;
			background: #f7438a;
		}
		.picker_btn_wht {
			border: 1px solid #e5e5e5;
			color: #1a1a1a;
			background: white;
		}
	}
}
</style>
